<template>
  <div class="comment-info" v-if="commentInfo !== null">
    <div class="w">
      <div class="header-info" v-if="user !== null">
        <div class="header-left">用户评价</div>
        <div class="header-right">更多</div>
      </div>
      <div class="comment-detail  ">
        <div class="info-user" v-if="user !== null">
          <img :src="user.avatar" alt="">
          <span>{{user.uname}}</span>
        </div>

        <div class="info-detail" v-if="detail !== null">
          <p>{{ detail.content}}</p>
          <div class="info-other">
            <span>
              {{detail.created | date}}
            </span>
            <span>
              {{detail.style}}
            </span>
          </div>

          <div class="info-img" v-if="detail.images !== undefined">
            <img :src="item" v-for="(item,index) in detail.images" :key="index" alt="">
          </div>

        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import {formatDate} from '@/common/utils'

  export default {
    name: "DetailCommentInfo",
    props: {
      commentInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    },

    computed: {
      user() {
        if (this.commentInfo !== null) {
          return this.commentInfo.list[0].user
        }
        return null
      },
      detail() {
        if (this.commentInfo !== null) {
          return this.commentInfo.list[0]
        }
        return null
      }
    },
    filters: {
      date(created) {
        // 1.将时间戳转化成Date对象
        const date = new Date(created * 1000)
        return formatDate(date, 'yyyy-MM-dd')
      }
    }
  }
</script>

<style scoped>

  .comment-info {
    border-bottom: 5px solid #f2f5f8;
  }

  .w {
    margin: 10px 10px 20px 10px;
  }


  .header-info {
    display: flex;
    height: 40px;
    padding: 0 10px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333333;
    border-bottom: 2px solid #ededed;
  }


  .header-right {
    font-size: 12px;
  }


  .comment-detail {
    margin: 10px 0;
  }

  .info-user {
    margin: 10px 0;
  }

  .info-user img {
    width: 42px;
    height: 42px;
    margin-right: 10px;
    border-radius: 50%;
    vertical-align: middle;
  }


  .info-detail p {
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    color: var(--color-text);
  }

  .info-other span {
    font-size: 12px;
    color: #a5a5a5;
  }

  .info-img {
    margin-top: 10px;
  }

  .info-img img {

    margin-right: 3px;
    width: 45px;
    height: 45px;
  }
</style>
